<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">

    <!-- 不等页面加载，直接写到上面判断，有则留下，无则拜拜到登录界面 -->
    <script>
        let username = sessionStorage.getItem("username");
        
        if(!username){
            //在这里出现了细节问题，解决了半天，是没加 http
            location.href = "http://127.0.0.1:82/signin.html";
        }  
        
    </script>
    <style>
         #register{width: 400px;margin: 150px auto;}
        #template {
            display: none;
        }

        .top {
            float: right;
            margin-top: 10px;
        }
        h4{float: left;margin: 10px 30px;}
        a{margin-left: 20px;}
        .mask,
        .mask1 {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .text {
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #FFF;
            padding: 20px 10px;
            border-radius: 5px;
        }

        .text1 {
            width: 300px;
            /* height: 200px; */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #FFF;
            padding: 20px 10px;
            border-radius: 5px;
            padding-top: 160px;
        }

        .m-cancel {
            margin-left: 20px;
        }

        input {

            border: none;
            line-height: 30px;
        }

        .text {
            position: relative;
        }

        .close {
            /* width: 30px;
            height: 30px; */
            background: rgb(221, 218, 218);
            position: absolute;
            top: 5px;
            right: 20px;
        }
    </style>
</head>

<body>
    <h4>当前用户为:<span id="go_out"></span><a href="signin.html" class="btn btn-primary">[退出登录]</a></h4>
    <div class="top">
        <button class="btn btn-primary add">+添加学生</button>
    </div>
    <table class="table">
        <thead>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>城市</th>
            <th>操作</th>
        </thead>
        <tbody>

        </tbody>
        <tr id="template">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <button class="btn btn-danger dele">删除</button>
                <button class="btn btn-primary compile">编辑</button>
            </td>
        </tr>
    </table>


    
    <div class="mask">
        <div class="text clear">
            <div class="close">
                ×
            </div>
            <label for="name">姓名:</label>
            <input type="text" id="name" class="form-control">
            <label for="age">年龄:</label>
            <input type="text" id="age" class="form-control">


            <div class="form-group">
				<label for="newCity">所在城市</label><br>
				<select name="" id="province"></select>
				<select name="" id="city"></select>
				<select name="" id="area"></select>
			</div>
            <!-- <label for="city">城市:</label> -->

            <!-- <input type="text" id="city" class="form-control"> -->
            <input type="radio" name="sex" id="sex">男
            <input type="radio" name="sex" id="se" >女
            <button class="btn btn-primary tijiao" style="display: block;">确认提交</button>
        </div>
    </div>
    <div class="mask1">
        <div class="text1">
            <button class="btn btn-primary m-cancel fr">取消</button>
            <button class="btn btn-danger m-dele fr">确认删除</button>
        </div>

    </div>
    
    <script src="./js/city.js"></script>
    <script src="./js/jquery.min.js"></script>
    
    <script>
        
        //退出登录
        $("a").click(function(){
            sessionStorage.clear()
        })
        
        $("#go_out").html(username)

        $.ajax({
            url:`http://127.0.0.1:82/index`,
           
            success(data){
                data = JSON.parse(data);       //正解析成对象     
                
                data.forEach(item => {          // 遍历
                    
                    let newtr = $("#template").clone(true)    //克隆模板
                    newtr.attr("id","")                       //去掉id使其显示
                    newtr.find("td").eq(0).html(item.id)
                    newtr.find("td").eq(1).html(item.name)
                    newtr.find("td").eq(2).html(item.age)
                    newtr.find("td").eq(3).html(Number(item.sex) ? "男" : "女")  // 三目判断
                    newtr.find("td").eq(4).html(item.city)
                    $(".table tbody").append(newtr)         // 插入tbody中
                });
            }
        })


        //删除

        $(".dele").click(function(){
            let id = $(this).parents("tr").find("td").eq(0).html()
            $(".mask1").show()
            $(".m-dele").click(function(){
                $.ajax({
                    url:`http://127.0.0.1:82/delete?id=${id}`,
                    success(data){

                        $(".mask1").hide()   //删除成功之后遮罩层隐藏
                        history.go(0)        //刷新页面
                    }
                })

            })

            $(".m-cancel").click(function(){
                $(".mask1").hide()
            })
        })
    
        // 添加
        $(".add").click(function () {
            $("input").val("");
            $(".mask").show();

            $(".tijiao").click(function () {
                let newname =  $(".text").find("#name").val()
                let newage =  $(".text").find("#age").val()
                let newcity =  $(".text").find("#city").val()
                let newsex =  $(".text").find("#sex")[0].checked ? 1 : 0

               
                $.ajax({
                    url: `http://127.0.0.1:82/add`,

                    // name=${newname}&age=${newage}&city=${newcity}&sex=${newsex}
                   
                    cxd:{
                        name:`${newname}`,
                        age:`${newage}`,
                        city:`${newcity}`,
                        sex:`${newsex}`

                    },

                    success(data) {

                        $(".mask").hide()
                        window.history.go(0)
                       
                    }
                })
            })
            $(".close").click(function () {
                $(".mask").hide()
            })
        })


         //省市区三级联动

            //获取省市区下拉菜单元素
            let province = $("#province");
            let city = $("#city");
            let area = $("#area");
                citys.forEach(item =>{
                    let option = $(`<option>${item.provinceName}</option>`);
                    province.append(option);
                })

            //给省绑定改变事件
            province.change(function(){
                // province.val("");

                //先清空原来的数据 
                city.empty();
                area.empty();

                cityList = citys[this.selectedIndex].mallCityList;
                //更新城市中的选择项
                cityList.forEach(item => {
                    let option = $(`<option>${item.cityName}</option>`);
                    city.append(option);
                });

                // 更新区中的选择项
				cityList[0].mallAreaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
            })

            //给市绑定改变事件

            city.change(function(){
                area.empty();   //将选中的区先清空
                let areaList = cityList[this.selectedIndex].mallAreaList;
                // 更新区中的选择项
				areaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
            })


        // 修改
        $(".compile").click(function () {
            $(".mask").show()
            $(".text").find("#name").val($(this).closest("tr").find("td").eq(1).html())
            $(".text").find("#age").val($(this).closest("tr").find("td").eq(2).html())
            $(".text").find("#city").val($(this).closest("tr").find("td").eq(4).html())
            $(this).closest("tr").find("td").eq(3).html() == "男" ? $(".text").find("#sex")[0].checked = true : $(".text").find("#se")[0].checked = true
            let id = $(this).closest("tr").find("td").eq(0).html()
            
            $(".tijiao").click(function () {
                let newname = $(".text").find("#name").val()
                let newage = $(".text").find("#age").val()
                let newcity = $(".text").find("#city").val()
                let newsex = $(".text").find("#sex")[0].checked ? 1 : 0
                $.ajax({
                    url: `http://127.0.0.1:82/change?id=${id}&name=${newname}&age=${newage}&city=${newcity}&sex=${newsex}`,
                    success(data) {
                        $(".mask").hide()
                       
                        // window.history.go(0)     
                    }
                })
            })
            $(".close").click(function () {
                $(".mask").hide()
            })
        })

    </script>
</body>
</html>